<template>
    <div class="det-banner position-relative">
        <van-swipe autoplay="false" :loop="loop" class="swp" @change="onChange">
            <van-swipe-item v-for="(item, index) in bannerImg" :key="index" @click="imagePreview(index)" class="swp__item">
                <legend-image :pic="item" :options="{ w: 375, h: 375 }" :class="'swp__img'" :isJD="isJD" />
            </van-swipe-item>
            <template #indicator v-if="bannerImg && bannerImg.length > 1">
                <template>
                    <div v-show="!showVideo" class="indicator">{{ current + 1 }} / {{ bannerImg.length }}</div>
                </template>
            </template>
        </van-swipe>
		
		<!-- start 视频组件(备注：除微信基础库 2.4.0+ 和 字节跳动小程序 和 app-nvue 2.1.5+，其他情况下非H5的video不能放入scroll-view和swiper。) -->
		<!-- 打开视频图标(圆圈里带个三角形) -->
		<!-- TODO => 京东商品暂时没有视频(后续如果有则可以添加) -->
		<div class="center-xy" v-if="video && !showVideo && current === 0&&!isJD" @click.stop="clickVideo">
			<div class="rounded-circle flex-col-center h-50p w-50p" style="border:4px solid rgba(255,255,255,0.9);background: rgba(0,0,0,.4);">
				<span class="iconfont iconshipinbofang_Facet line-h text-white ml" style="font-size: 25px;margin-bottom: -2px;color:rgba(0,0,0,.4);"></span>
			</div>
		</div>
		<div class="flex-col-center bg-dark w-100 h-100 zindex-109 position-absolute bottom-0 left-0" style="max-height: 100%;" v-if="showVideo" @click.stop="">
			<!-- :style="{height: (clientWidth - 40) + 'px'}" -->
			<video
				id="myVideo"
				class="w-100 flex-1"
				style="height: 6.7rem;"
				@fullscreenchange="fullscreenchange"
				:src="$imgUrlHead + video"
				autoplay
				controls
				@error="videoErrorCallback"
				bindended="closeVideo"
			></video>
			<!-- <vue-plyr class="w-100 flex-1" ref="plyr" :style="{ '--plyr-color-main': themes.color }">
			    <video controls playsinline autoplay :data-poster="isJD ? '' : $imgUrlHead + bannerImg[0]">
			        <source size="1080" :src="$imgUrlHead + video" type="video/mp4" />
			    </video>
			</vue-plyr> -->
			<div class="text-white flex-center w-100" style="height: 0.8rem;" @click.stop="closeVideo">
				<div class="iconfont iconclose text-white mr-1" style="font-size: 20px;"><span class="font-16 v-text-top">&nbsp;关闭</span></div>
			</div>
		</div>
		<!-- end 视频组件 -->
    </div>
</template>

<script>
import { Swipe, ImagePreview } from 'vant'
import legendImage from 'components/legendImage/legendImage'
import { mapState } from 'vuex'

export default {
    props: {
        //轮播图
        bannerImg: Array,
        //是否预览图片默认是false
        isPreview: {
            type: Boolean,
            default: false
        },
        //是否京东商品默认是false
        isJD: {
            type: Boolean,
            default: false
        },
        // 视频
        video: {
            type: String,
            default: ''
        }
    },
    components: {
        Swipe,
        ImagePreview,
        legendImage
    },
	data() {
	    return {
	        picPreview: '',
	        current: 0,
	        autoplay: 3000,
	        loop: true,
	        videoPlaing: false ,// 视频是否在播放中
			showVideo: false, // 显示视频组件
	    }
	},
	computed: {
	    ...mapState(['themes'])
	},
    watch: {
		current(newVal) {
			if (newVal != 0) {
				this.showVideo = false;
			}
		},
        isPreview(val) {
            if (!val) {
                this.closePic()
            }
        }
    },
    methods: {
        onChange(index) {
            this.current = index
        },
        goback() {
            this.$router.back()
            this.$router.isBack = true
        },
        //图片预览
        imagePreview(index) {
            let that = this
            that.$emit('beforeLeave', true)
            let arrPic = []

            this.bannerImg.forEach((pic, index) => {
                if (this.isJD) {
                    arrPic.push(`http://img13.360buyimg.com/n12/` + pic)
                } else {
                    arrPic.push(this.$imgUrlHead + pic)
                }
            })

            this.picPreview = ImagePreview({
                images: arrPic,
                startPosition: index,
                onClose() {
                    // do something
                    that.$emit('beforeLeave', false)
                }
            })
        },
        closePic() {
            if (this.picPreview) {
                this.picPreview.close()
                return
            } else {
                this.goback()
            }
        },
		closeVideo() {
			this.showVideo = false;
		},
		// 点击视频按钮打开视频
		clickVideo() {
			this.showVideo = true;
		},
		fullscreenchange(e) {
			this.fullScreen = e.detail.fullScreen;
		},
		videoErrorCallback(e) {
		},
    }
}
</script>

<style lang="stylus" scoped>
.swp {
    position: relative;
    display: block;
    width: 100%;
	height 7.5rem;
    margin: 0;
    padding: 0;
    // background-color: #f7f8fa;
}
.swp__img {
    display: block;
	width 100%;
	height: 100%;
    // max-width: 100%;
    // max-height: 100%;
    // min-width: 50%;
    // min-height: 50%;
}
.swp__item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    align-items: center;
}
.van-swipe__track {
    width: 375px !important;
    margin: 0 auto !important;
}
.det-banner img {
    // width: unset  !important;
    // height: unset  !important;
}
.indicator {
  position: absolute;
  right: 15px;
  bottom: 15px;
  height: 20px;
  line-height: 20px;
  padding: 0 10px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 11px;
  font-size: 14px;
  text-align: center;
}
</style>
